﻿<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3">Beauty Your Data</h1>
</div>
<div class="wrapper-md">
    <div ng-controller="FlotChartDemoCtrl">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">Spline</div>
                    <div class="panel-body">
                        <div ui-jq="plot" ui-options="
                             [
                             { data:{{d}},points:{show:true,radius:6},splines:{show:true,tension:0.45,lineWidth:5,fill:0 }}
                             ],
                             {
                             colors: ['{{color.info}}'],
                             series: { shadowSize: 3 },
                             xaxis:{
                             font :{ color: '#ccc' },
                             position: 'bottom' ,
                             ticks: [
                             [ 1, 'Jan' ], [ 2, 'Feb' ], [ 3, 'Mar' ], [ 4, 'Apr' ], [ 5, 'May' ], [ 6, 'Jun' ], [ 7, 'Jul' ], [ 8, 'Aug' ], [ 9, 'Sep' ], [ 10, 'Oct' ], [ 11, 'Nov' ], [ 12, 'Dec' ]
                             ]
                             },
                             yaxis:{ font :{ color: '#ccc' } },
                             grid: { hoverable:true, clickable: true, borderWidth :0, color: '#ccc' },
                             tooltip: true,
                             tooltipOpts: { content: '%x.1 is %y.4' , defaultTheme: false, shifts: { x: 0, y: 20 } }
                             }
                             " style="height:240px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">Multiple</div>
                    <div class="panel-body">
                        <div ui-jq="plot" ui-options="
                             [
                             { data: {{d0_1}} , label: 'Unique Visits' , points: { show: true } },
                             { data: {{d0_2}} , label: 'Page Views' , bars: { show: true, barWidth: 0.6, fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.4}] } } }
                             ],
                             {
                             colors: [ '{{color.info}}' ,'{{color.success}}' ],
                             series: { shadowSize: 2 },
                             xaxis:{ font: { color: '#ccc' } },
                             yaxis:{ font: { color: '#ccc' } },
                             grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                             tooltip: true,
                             tooltipOpts: { content: '%s of %x.1 is %y.4' , defaultTheme: false, shifts: { x: 0, y: 20 } }
                             }
                             " style="height:240px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">Order bar</div>
                    <div class="panel-body">
                        <div ui-jq="plot" ui-options="
                             [
                             { label: 'A' , data: {{d1_1}} },
                             { label: 'B' , data: {{d1_2}} },
                             { label: 'C' , data: {{d1_3}} }
                             ],
                             {
                             bars: { show: true, fill: true, lineWidth: 1, order: 1, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] } },
                             colors: ['{{color.info}}', '{{color.success}}' , '{{color.primary}}' ],
                             series: { shadowSize: 1 },
                             xaxis:{ font: { color: '#ccc' } },
                             yaxis:{ font: { color: '#ccc' } },
                             grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                             tooltip: true
                             }
                             " style="height:240px"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">Bar</div>
                    <div class="panel-body">
                        <div ui-jq="plot" ui-options="
                             [
                             { data: {{d2}} , label: 'Pressure' , color: '{{color.info}}' }
                             ],
                             {
                             bars: { show: true, barWidth: 0.6, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] } },
                             xaxis: { font: { color: '#ccc' } },
                             yaxis: { font: { color: '#ccc' }, min: -2, max: 2 },
                             grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                             series: { shadowSize: 1 },
                             tooltip: true
                             }
                             " style="height:240px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">Compose</div>
                    <div class="panel-body">
                        <div ui-jq="plot" ui-options="
                             [
                             { data: {{d0_1}} , label: 'A' , points: { show: true }, lines: { show: true, fill: true, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1}] } } },
                             { data: {{d0_2}} , label: 'B' , points: { show: true, radius: 4 } }
                             ],
                             {
                             colors: [ '{{color.info}}' ,'{{color.warning}}' ],
                             series: { shadowSize: 2 },
                             xaxis:{ font: { color: '#ccc' } },
                             yaxis:{ font: { color: '#ccc' } },
                             grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                             tooltip: true,
                             tooltipOpts: { content: '%s of %x.1 is %y.4' , defaultTheme: false, shifts: { x: 0, y: 20 } }
                             }
                             " style="height:240px"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">Donut Pie</div>
                    <div class="panel-body">
                        <div ui-jq="plot" ui-options="
                             {{d3}} ,
                             {
                             series: { pie: { show: true, innerRadius: 0.5, stroke: { width: 0 }, label: { show: true, threshold: 0.05 } } },
                             colors: ['{{color.primary}}','{{color.info}}','{{color.success}}','{{color.warning}}','{{color.danger}}'],
                             grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                             tooltip: true,
                             tooltipOpts: { content: '%s: %p.0%' }
                             }
                             " style="height:240px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>